<template>
    <scroll-view class="content">
        <image
            mode="aspectFill"
            src="https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg"
            :style="{
                width: '100%',
                height: '200px',
                'object-fit': 'cover',
                'padding-top': `${statusBarHeight}px`
            }"
        />

        <picker :range="communityList" :value="communityIndex" @change="selectCommunity">
            <div
                style="
                    display: flex;
                    flex-direction: row;
                    padding-left: 20px;
                    transform: translate(0px, -200px);
                "
            >
                <uni-icons type="chatbubble" color="white"></uni-icons>
                <text style="color: white">{{ communityList[communityIndex] }}</text>
                <uni-icons type="right" color="white"></uni-icons>
            </div>
        </picker>

        <div class="wrapper" style="transform: translate(0px, -50px)">
            <div style="display: flex; flex-direction: row; justify-content: center">
                <div class="modules" :style="{ width: windowWidth - 18 * 2 + 'px' }">
                    <div v-for="(apps, index) in appModules" :key="index" class="modulesRow">
                        <div v-for="(item, index2) in apps" :key="index2">
                            <li @click="goAppModule(item)">
                                <img
                                    src="@/assets/logo.png"
                                    class="moduleAppIcon"
                                    :style="{
                                        opacity: item.title ? 1 : 0
                                    }"
                                />

                                <div>
                                    <text>{{ item.title }}</text>
                                </div>
                            </li>
                        </div>
                    </div>
                </div>
            </div>

            <div
                style="
                    padding-left: 18px;

                    padding-right: 18px;
                "
            >
                <HomeTitleRow :more-link="'111'" :title="'热门活动'" :sub="'热门活动展示'" />
                <div style="height: 8px"></div>
                <div @click="onTapActivityCard">
                    <HomeActivityCard
                        :status="1"
                        title="活动名称"
                        time="2023年11月29日"
                        activity-image="https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg"
                    ></HomeActivityCard>
                </div>
                <HomeTitleRow :more-link="''" :title="'便民服务'" :sub="'有温度的智慧社区'" />
                <div style="height: 18px"></div>
                <div style="display: flex; flex-direction: row">
                    <div class="card" style="flex-grow: 1; height: 160px">
                        <ConvenienceServiceTexts
                            title="洗护"
                            :sub="'衣服便捷洗护 >'"
                        ></ConvenienceServiceTexts>
                        <div style="display: flex; flex-direction: row; justify-content: center">
                            <img
                                src="@/assets/washing-machine.png"
                                style="height: 96px; width: 78px"
                            />
                        </div>
                    </div>
                    <div style="width: 10px"></div>
                    <div style="flex-grow: 1">
                        <div>
                            <div class="card cardSmall">
                                <ConvenienceServiceTexts
                                    title="缝补"
                                    :sub="'衣服便捷洗护 >'"
                                ></ConvenienceServiceTexts>
                                <img src="@/assets/sewing.png" style="width: 47px; height: 47px" />
                            </div>
                            <div style="height: 7px"></div>
                            <div class="card cardSmall">
                                <ConvenienceServiceTexts
                                    title="理发"
                                    :sub="'30分钟快剪理发 >'"
                                ></ConvenienceServiceTexts>

                                <img
                                    src="@/assets/barber-shop.png"
                                    style="width: 68px; height: 47px"
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <HomeTitleRow :more-link="'222'" :title="'自助消费'" :sub="'咖啡馆自助消费'" />
                <div style="height: 8px"></div>
                <HomeActivityCard
                    title="活动名称"
                    time="2023年11月29日"
                    activity-image="https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg"
                ></HomeActivityCard>
            </div>
        </div>
    </scroll-view>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import HomeTitleRow from '@/components/home/home-title-row.vue'
import HomeActivityCard from '@/components/home/home-activity-card.vue'
import ConvenienceServiceTexts from '@/components/home/convenience-service-texts.vue'

export default defineComponent({
    name: 'Home',
    components: { HomeTitleRow, HomeActivityCard, ConvenienceServiceTexts },
    methods: {
        onTapActivityCard() {
            uni.navigateTo({
                url: '/activityPages/activity/activity-detail?id=1'
            })
        },
        goAppModule(item) {
            if (item.title === '活动预约') {
                uni.switchTab({
                    url: item.path
                })
            }else if(item.title ==='政务服务'){
                uni.navigateTo({
                    url: item.path
                })
            }  else {
                uni.navigateTo({
                    url: item.path,
                    fail(result) {
                        uni.showToast({
                            title: '敬请期待',
                            icon: 'none'
                        })
                    }
                })
            }
        },
        selectCommunity(e) {
            this.communityIndex = e.detail.value
        }
    },
    setup() {
        const communityList = ref(['社区1', '社区2'])
        const communityIndex = ref(0)
        const count = ref(0)
        const { windowWidth, windowHeight, statusBarHeight } = uni.getSystemInfoSync()
        const appModules = [
            [
                {
                    title: '社区商店',
                    icon: 'shop',
                    path: '/pages/community/index'
                },
                {
                    title: '共享预约',
                    icon: 'shop',
                    path: '/activityPages/office-share/common-share'
                },
                {
                    title: '便民服务',
                    icon: 'shop',
                    path: '/mainPages/convenientservices/index'
                },
                {
                    title: '自助消费',
                    icon: 'shop',
                    path: '/pages/community/index'
                }
            ],
            [
                {
                    title: '政务服务',
                    icon: 'shop',
                    path: '/mainPages/governmentservices/index'
                },
                {
                    title: '品牌',
                    icon: 'shop',
                    path: '/mainPages/brand/index'
                },
                {
                    title: '活动预约',
                    icon: 'shop',
                    path: '/pages/activity/index'
                },
                {
                    title: '',
                    icon: '',
                    path: ''
                }
            ]
        ]

        // 返回值会暴露给模板和其他的选项式 API 钩子
        console.log('windowWidth', windowWidth)
        return {
            count,
            appModules,
            windowWidth,
            statusBarHeight,
            communityList,
            communityIndex
        }
    },

    mounted() {}
})
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    background-color: $bg-color;
    .wrapper {
        width: 100%;
        // padding-left: 18px;
        // padding-right: 18px;
    }
    .logo {
        width: 200rpx;
        height: 200rpx;
        margin: 50rpx auto;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        color: #8f8f94;
        font-size: 36rpx;
    }
    .parentDiv {
        // position: relative;
        // .banner {
        //     position: absolute;
        //     z-index: 1;
        // }
    }
    .modules {
        // width: 354px;
        height: 188px;

        line-height: 20px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        justify-content: space-around;
        display: flex;
        flex-direction: column;

        .modulesRow {
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            .moduleAppIcon {
                width: 50px;
                height: 50px;
                line-height: 20px;

                text-align: center;
                border-radius: 999px;
            }
        }
    }

    .card {
        background-color: white;
        border-radius: 10px;
        padding: 8px;
        box-sizing: border-box; //设置padding不增加高度
    }
    .cardSmall {
        display: flex;
        flex-direction: row;
        height: 76px;

        justify-content: space-between;
    }
}
</style>
